import React from 'react';

import { Row, Col, Icon, Button, Tooltip } from 'antd';
import styles from './index.less';

export default class AreaDisplayer extends React.PureComponent {
  state = {};

  /**
   *
   *
   * @param {number} [type=1] 1、套数/个数说明：2、均价说明：3、金额说明：
   * @returns
   */
  renderTipCompoent = (type = 1) => {
    if (type === 'approval') {
      return (
        <>
          <div>常规：逾期提醒间隔天数3天；</div>
          <div>重要：逾期提醒间隔天数3天；</div>
          <div>紧急：逾期提醒间隔天数2天；</div>
          <div>重要紧急：逾期提醒间隔天数1天；</div>
        </>
      );
    }
    if (type === 1) {
      return (
        <>
          <div> 1）组团、分期、项目、城市公司、区域、集团同时存在房源套数和可售车位个数；</div>
          <div>
            2）例如组团“套数/车位数”单元格数据为：1,777 /
            777时，表示组团下有1,777套房源，有777个可售车位；
          </div>
        </>
      );
    }
    if (type === 2) {
      return (
        <>
          <div>1）组团、分期、项目、城市公司、区域、集团同时存在房源均价和车位均价；</div>
          <div>
            2）例如组团“均价”单元格数据为：12,000 /
            250,000时，表示组团的房源均价为：12,000元/平米，车位均价为：250,000元/个；
          </div>
        </>
      );
    }
    return (
      <>
        <div>
          1）组团、分期、项目、城市公司、区域、集团同时存在总货值金额、房源货值金额和车位货值金额；
        </div>
        <div>
          2）例如组团“金额”单元格数据为：232,665 / 213,240 /
          19,425时，表示组团的总货值金额为：232,665万元，房源货值金额为：213,240万元，车位货值金额为：19,425万元；
        </div>
      </>
    );
  };

  render() {
    const { type } = this.props;
    return (
      <>
        <Row align="middle" justify="center" type="flex">
          <Col>{this.props.children}</Col>
          {type ? (
            <Col>
              <Tooltip placement="top" title={this.renderTipCompoent(type)}>
                <Icon
                  style={{ color: '#D2D2D2', marginLeft: '3px' }}
                  type="question-circle"
                  theme="filled"
                />
              </Tooltip>
            </Col>
          ) : null}
        </Row>
      </>
    );
  }
}
